<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <ul>
      <li class="box">
        <div class="top">
          <!-- .top 最底层 -->
          <img src="../../images/music_item.jpg" alt="健身女孩" />
          <!-- 使用绝对定位，设置在 .top 第二层，覆盖整个.top -->
          <a class="cover" href="#"></a>
          <!-- 使用绝对定位，设置在 .top 最上层，背景图使用精灵图 -->
          <div class="info">
            <!-- 使用精灵图 -->
            <i class="icon-music"></i>
            <span class="count">306万</span>
            <!-- 使用精灵图 -->
            <a class="icon-play" href="#"></a>
          </div>
        </div>
        <a class="bottom" href="#"> 一个健身女孩的{跑步歌单} </a>
      </li>
    </ul>
  </body>
</html>
